<template>
	<div>
		<div class="middle">
			<div class="box">
				<div class="boxl">
					<i class="el-icon-s-custom"></i>
				</div>
				<div class="boxr">
					<span>用户</span><span style="color: #009688">{{ users }}</span>人
				</div>
			</div>
			<!-- <div class="box">
				<div class="boxl">
					<i class="el-icon-s-opportunity"></i>
				</div>
				<div class="boxr">
					<span>触发器</span><span style="color: #1e9fff">{{ happens }}</span>个
				</div>
			</div> -->
			<div class="box">
				<div class="boxl">
					<i class="el-icon-s-tools"></i>
				</div>
				<div class="boxr">
					<span>总设备</span><span style="color: #ffb800">{{ devices }}</span>台
					<!-- <span>,在线</span><span style="color:green;"
					 class="twoline">{{lineDev}}</span>台 -->
				</div>
			</div>
			<div class="box">
				<div class="boxl">
					<i class="el-icon-s-tools"></i>
				</div>
				<div class="boxr over">
					<span>在线</span><span style="color: green">{{ lineDev }}</span>台
				</div>
			</div>
			<!-- <div class="box">
				<div class="boxl">
					<i class="el-icon-message-solid"></i>
				</div>
				<div class="boxr">
					<span>报警设备</span><span style="color: #ff5722">{{ alarmEq }}</span>台
				</div>
			</div> -->
		</div>
		<div style="position:relative;">
			<div id="content" ref="content" class="content" v-loading="mapLoading"
				element-loading-text="正在加载设备和地图,请稍等..." element-loading-spinner="el-icon-loading">
			</div>
			<div class="search" ref="search">
				<el-form inline :model="mapForm" class="searchForm">
					<el-form-item>
						<span class="chaxu">项目：</span>
						<!-- <el-select v-model="mapForm.product_id" class="inpu"
							style="background-color:transparent;color:#fff;width:3rem;" placeholder="选择设备状态"
							@change="changeMapDeviceState(mapForm.product_id,mapForm.state)">
							<el-option class="mapOption" v-for="item in options" :key="item.value" :value="item.value"
								:label="item.label" :disabled="item.disabled">
							</el-option>
						</el-select> -->
						<el-cascader
							class="inpu"
							v-model="mapForm.product_id"
							:options="parents"
							:props="{ checkStrictly: true }"
							@change="handleChange(mapForm.product_id)">
						</el-cascader>
					</el-form-item>
					<el-form-item>
						<span class="chaxu">状态：</span>
						<el-select v-model="mapForm.state" class="inpu"
							style="background-color:transparent;color:#fff;width:3rem;" placeholder="选择设备状态"
							@change="changeMapDeviceState(mapForm.product_id,mapForm.state)">
							<el-option class="mapOption" v-for="item in states" :key="item.value" :value="item.value"
								:label="item.label" :disabled="item.disabled">
							</el-option>
						</el-select>
					</el-form-item>
				</el-form>
			</div>
			<button class="mapbtn" id="mapbtn" ref="mapbtn" @click="fullScreen">
				全屏切换
			</button>
		</div>
		<!-- <button v-else class="mapbtn" id="backbtn" @click="backMap">退出全屏</button> -->
		<el-dialog :visible="outerVisible" v-el-dialog-drag v-el-dialog-drag-width :append-to-body="true"
			:fullscreen="full" :width="win.screen.width>=1600?'70%':'82%'" class="datadial"
			:top="win.screen.width>=1600?'200px':'120px'" :show-close="false">
			<div class="toptit">
				<span>{{ equip }}</span> | <span>查看数据</span>
				<div style="float: right; cursor: pointer">
					<span v-if="!full" @click="fullWeb">全屏</span>
					<span v-else @click="backWeb">还原</span>
					| <span @click="closeOutside">关闭</span>
					<!-- <span @click="outerVisible=false">关闭</span> -->
				</div>
			</div>
			<div class="bottom_top">
				<div class="bottom_top_left" @click="changeBox">
					<div class="live" id="live" :class="box == 'live' ? 'cardActive' : ''">
						实时数据
					</div>
					<div class="vars" id="vars" :class="box == 'vars' ? 'cardActive' : ''">
						参数数据
					</div>
				</div>
				<el-button type="primary" size="small" style="float:right;margin-top:0.19rem;margin-left:0.4rem;"
					@click="goLiveData">监控</el-button>
				<el-select v-model="group" placeholder="选择分组" class="inpu" style="float: right"
					v-if="deviceType == 1 && groupsCount > 1" @change="changeGroup(group)">
					<el-option style="text-align: left; padding-left: 0.2rem" v-for="item in groups" :key="item.value"
						:value="item.value" :label="item.label">
					</el-option>
				</el-select>
				<span style="font-size: 0.35rem; margin-right: 10px; float: right"
					v-if="deviceType == 1 && groupsCount > 1">选择分组:</span>
			</div>
			<div v-if="box == 'live'">
				<div class="databox" ref="databox" v-if="pointdata.length"
					:class="pointdata.length <= 3 ? 'letcenter' : ''">
					<div v-for="(item, i) in pointdata" :key="i" :class="
              item.show_type == 11 || item.show_type == 12
                ? 'itembox_6'
                : 'itembox'
            ">
						<div class="imgbox">
							<img v-if="item.icon" :src="item.icon" class="pic" />
							<img v-else :src="baseurl+'static/images/icon/icon1.png'" class="pic" />
						</div>
						<div :class="
                item.show_type == 11 || item.show_type == 12
                  ? 'valuebox_6'
                  : 'valuebox'
              ">
							<!-- <div class="roundline">
								<span class="sensorName over" :class="item.read_write==2?'green':''" :title="item.sensor_name">{{item.sensor_name}}</span>
								<el-button v-if="item.save_type!=2 && item.show_type!=5 && item.show_type!=6" style="float:right;" class="btn" @click="roundLineHis(item)">历史曲线</el-button>
							</div> -->
							<!-- <div class="roundline" style="position: relative;">
								<span v-if="item.show_type==1" :class="item.read_write==1?'read':'write'" @click="changeVal(item)" :title="item.read_write==1?'只读数值':'读写数值，点击可设值'">{{item.value}}</span>
								<el-switch v-else-if="item.show_type==2" v-model="item.value" :width="stateWidth" @change="changeState(item)"
								 class="demo turn" active-color="#13ce66" inactive-color="#ccc" active-text="开" inactive-text="关" :title="item.read_write==1?'只读开关':'读写开关，点击操作'"  :disabled="item.read_write==1?true:false" :active-value="one"  :inactive-value="zero">
								</el-switch>
								<span v-else-if="item.show_type==3 && item.read_write==1" :class="item.value==1?'yes':'no'" style="float:left;" title="只读状态"></span>
								<div  v-else-if="item.show_type==3 && item.read_write==2" class="bt_outer" @click="changeState2(item)" title="读写状态,点击可设值">
									<span :class="item.value==1?'bt_inner_on':'bt_inner_off'"></span>
								</div>
								<i v-else-if="item.show_type==4 && item.read_write==1" class="el-icon-bell" :class="item.value?'alarm_on':'alarm_off'" title="只读报警"></i>
								<i v-else-if="item.show_type==4 && item.read_write==2 && item.value" class="el-icon-message-solid alarm_on" title="读写报警,点击可清除" @click="changeState3(item)"></i>
								<i v-else-if="item.show_type==4 && item.read_write==2 && (!item.value)" class="el-icon-message-solid alarm_off" title="读写报警,未报警,不可操作"></i>
								<span v-else-if="item.show_type==5" :class="item.read_write==1?'read':'write'" @click="changeVal(item)" :title="item.read_write==1?'只读字符串':'读写字符串，点击可设值'" style="width:100%">{{item.value}}</span>
								<el-radio-group v-else-if="item.show_type==6" v-model="item.value" @change="changeState4(item)"
								 :title="item.read_write==1?'只读多位开关':'读写多位开关，点击可设值'" :disabled="item.read_write==1?true:false">
									<el-radio v-for="(value,key,index) in item.ext_vars" :key="index" :label="Number(key)" class="rad over">{{value}}</el-radio>
								</el-radio-group>
								<span v-if="item.show_type==1" style="display:inline-block;vertical-align:top;">{{item.unit}}</span>
								<el-button v-if="item.show_type!=5 && item.show_type!=6" class="btn turnbtn" @click="roundLineLive(item)">实时曲线</el-button>
							</div> -->
							<div class="roundline" style="position: relative">
								<span v-if="item.show_type == 1" class="read" title="只读数值">{{ item.value }}</span>
								<span v-else-if="item.show_type == 2" class="write" @click="changeVal(item)"
									title="读写数值，点击可设值">{{ item.value }}</span>
								<label class="switch switch-green switch-read" v-else-if="item.show_type==3"
									title="只读开关">
									<input type="checkbox" :checked="item.value==1?true:false" :disabled="true"
										class="switch-input">
									<span class="switch-label" data-on="On" data-off="Off"></span>
									<span class="switch-handle"></span>
								</label>
								<!-- <el-switch v-else-if="item.show_type == 3" v-model="item.value" :width="stateWidth"
									class="demo turn" active-color="#13ce66" inactive-color="#ccc" active-text="开"
									inactive-text="关" title="只读开关" :disabled="true" :active-value="one"
									:inactive-value="zero">
								</el-switch> -->
								<label class="switch switch-green" v-else-if="item.show_type==4" title="读写开关，点击操作">
									<input type="checkbox" :checked="item.value==1?true:false"
										@change="changeState(item,$event)" :disabled="false" class="switch-input">
									<span class="switch-label" data-on="On" data-off="Off"></span>
									<span class="switch-handle"></span>
								</label>
								<!-- <el-switch v-else-if="item.show_type == 4" v-model="item.value" :width="stateWidth"
									@change="changeState(item)" class="demo turn" active-color="#13ce66"
									inactive-color="#ccc" active-text="开" inactive-text="关" title="读写开关，点击操作"
									:disabled="false" :active-value="one" :inactive-value="zero">
								</el-switch> -->
								<span v-else-if="item.show_type == 5" :class="item.value == 1 ? 'yes' : 'no'"
									style="float: left" title="只读状态"></span>
								<span v-else-if="item.show_type==15" :class="item.value==1?'yes':'no_grey'"
									style="float:left;" title="只读状态(明暗)"></span>
								<div v-else-if="item.show_type == 6" class="bt_outer" @click="changeState2(item)"
									title="读写状态,点击可设值">
									<span :class="item.value == 1 ? 'bt_inner_on' : 'bt_inner_off'"></span>
								</div>
								<i v-else-if="item.show_type == 7" class="el-icon-bell"
									:class="item.value==1? 'alarm_on' : 'alarm_off'" title="只读报警"></i>
								<i v-else-if="item.show_type == 13" class="el-icon-bell"
									:class="item.value==1?'alarm_off':item.value==0?'alarm_on':'alarm_off'"
									title="只读报警(反)"></i>
								<i v-else-if="item.show_type == 8 && item.value" class="el-icon-message-solid alarm_on"
									title="读写报警,点击可清除" @click="changeState3(item)"></i>
								<i v-else-if="item.show_type == 8 && !item.value"
									class="el-icon-message-solid alarm_off" title="读写报警,未报警,不可操作"></i>
								<span v-else-if="item.show_type == 9" class="read" title="只读字符串"
									style="width: 100%">{{ item.value }}</span>
								<span v-else-if="item.show_type == 10" class="write" @click="changeVal(item)"
									title="读写字符串，点击可设值" style="width: 100%">{{ item.value }}</span>
								<el-radio-group v-else-if="item.show_type == 11" v-model="item.value" title="只读多位开关"
									:disabled="true">
									<el-radio v-for="(value, key, index) in item.ext_vars" :key="index"
										:label="Number(key)" class="rad over">{{ value }}</el-radio>
								</el-radio-group>
								<el-radio-group v-else-if="item.show_type == 12" v-model="item.value"
									@change="changeState4(item)" title="读写多位开关，点击可设值" :disabled="false">
									<el-radio v-for="(value, key, index) in item.ext_vars" :key="index"
										:label="Number(key)" class="rad over">{{ value }}</el-radio>
								</el-radio-group>
								<span v-if="item.show_type == 1 || item.show_type == 2"
									style="display: inline-block; vertical-align: top">{{ item.unit }}</span>
								<el-button v-if="item.show_type==1 || item.show_type==5 || item.show_type==15"
									class="btn turnbtn" @click="roundLineLive(item)">
									实时曲线</el-button>
							</div>
							<div class="roundline" style="margin-top: 0.1rem">
								<span class="sensorName over" :class="item.show_type % 2 == 0 ? 'green' : ''"
									:style="{'max-width':item.save_type==2 || (item.show_type>9 && item.show_type<12)?'95%!important':''}"
									:title="item.sensor_name">{{ item.sensor_name }}</span>
								<el-button
									v-if="item.save_type != 2 && (item.show_type==1 || item.show_type==5 || item.show_type==15)"
									style="float: right; margin-top: -1px" class="btn" @click="roundLineHis(item)">历史曲线
								</el-button>
							</div>
						</div>
					</div>
				</div>
				<div v-else style="width: 100%; text-align: center; font-size: 16px">
					该设备暂无实时数据点
				</div>
			</div>
			<div v-if="box == 'vars'">
				<div class="databox" ref="databox" v-if="varsData.length"
					:class="varsData.length <= 3 ? 'letcenter' : ''">
					<div v-for="(item, i) in varsData" :key="i" :class="
              item.show_type == 11 || item.show_type == 12
                ? 'itembox_6'
                : 'itembox'
            ">
						<div class="imgbox">
							<img v-if="item.icon" :src="item.icon" class="pic" />
							<img v-else :src="baseurl+'static/images/icon/icon1.png'" class="pic" />
						</div>
						<div :class="
                item.show_type == 11 || item.show_type == 12
                  ? 'valuebox_6'
                  : 'valuebox'
              ">
							<!-- <div class="roundline">
								<span class="sensorName over" :class="item.read_write==2?'green':''" :title="item.sensor_name">{{item.sensor_name}}</span>
							</div> -->
							<!-- <div class="roundline" style="position: relative;">
								<span v-if="item.show_type==1" :class="item.read_write==1?'read':'write'" @click="changeVal(item)" :title="item.read_write==1?'只读数值':'读写数值，点击可设值'">{{item.value}}</span>
								<el-switch v-else-if="item.show_type==2" v-model="item.value" :width="stateWidth" @change="changeState(item)"
								 class="demo turn" active-color="#13ce66" inactive-color="#ccc" active-text="开" inactive-text="关" :title="item.read_write==1?'只读开关':'读写开关，点击操作'"  :disabled="item.read_write==1?true:false" :active-value="one"  :inactive-value="zero">
								</el-switch>
								<span v-else-if="item.show_type==3 && item.read_write==1" :class="item.value==1?'yes':'no'" style="float:left;" title="只读状态"></span>
								<div  v-else-if="item.show_type==3 && item.read_write==2" class="bt_outer" @click="changeState2(item)" title="读写状态,点击可设值">
									<span :class="item.value==1?'bt_inner_on':'bt_inner_off'"></span>
								</div>
								<i v-else-if="item.show_type==4 && item.read_write==1" class="el-icon-bell" :class="item.value?'alarm_on':'alarm_off'" title="只读报警"></i>
								<i v-else-if="item.show_type==4 && item.read_write==2 && item.value" class="el-icon-message-solid alarm_on" title="读写报警,点击可清除" @click="changeState3(item)"></i>
								<i v-else-if="item.show_type==4 && item.read_write==2 && (!item.value)" class="el-icon-message-solid alarm_off" title="读写报警,未报警,不可操作"></i>
								<span v-else-if="item.show_type==5" :class="item.read_write==1?'read':'write'" @click="changeVal(item)" :title="item.read_write==1?'只读字符串':'读写字符串，点击可设值'" style="width:100%">{{item.value}}</span>
								<el-radio-group v-else-if="item.show_type==6" v-model="item.value" @change="changeState4(item)"
								 :title="item.read_write==1?'只读多位开关':'读写多位开关，点击可设值'" :disabled="item.read_write==1?true:false">
									<el-radio v-for="(value,key,index) in item.ext_vars" :key="index" :label="Number(key)" class="rad over">{{value}}</el-radio>
									
								</el-radio-group>
								<span v-if="item.show_type==1" style="display:inline-block;vertical-align:top;">{{item.unit}}</span>
							</div> -->
							<div class="roundline" style="position: relative">
								<span v-if="item.show_type == 1" class="read" title="只读数值">{{ item.value }}</span>
								<span v-else-if="item.show_type == 2" class="write" @click="changeVal(item)"
									title="读写数值，点击可设值">{{ item.value }}</span>
								<label class="switch switch-green switch-read" v-else-if="item.show_type==3"
									title="只读开关">
									<input type="checkbox" :checked="item.value==1?true:false" :disabled="true"
										class="switch-input">
									<span class="switch-label" data-on="On" data-off="Off"></span>
									<span class="switch-handle"></span>
								</label>
								<!-- <el-switch v-else-if="item.show_type == 3" v-model="item.value" :width="stateWidth"
									class="demo turn" active-color="#13ce66" inactive-color="#ccc" active-text="开"
									inactive-text="关" title="只读开关" :disabled="true" :active-value="one"
									:inactive-value="zero">
								</el-switch> -->
								<label class="switch switch-green" v-else-if="item.show_type==4" title="读写开关，点击操作">
									<input type="checkbox" :checked="item.value==1?true:false"
										@click="changeState(item,$event)" :disabled="false" class="switch-input">
									<span class="switch-label" data-on="On" data-off="Off"></span>
									<span class="switch-handle"></span>
								</label>
								<!-- <el-switch v-else-if="item.show_type == 4" v-model="item.value" :width="stateWidth"
									@change="changeState(item)" class="demo turn" active-color="#13ce66"
									inactive-color="#ccc" active-text="开" inactive-text="关" title="读写开关，点击操作"
									:disabled="false" :active-value="one" :inactive-value="zero">
								</el-switch> -->
								<span v-else-if="item.show_type == 5" :class="item.value == 1 ? 'yes' : 'no'"
									style="float: left" title="只读状态"></span>
								<span v-else-if="item.show_type==15" :class="item.value==1?'yes':'no_grey'"
									style="float:left;" title="只读状态(明暗)"></span>
								<div v-else-if="item.show_type == 6" class="bt_outer" @click="changeState2(item)"
									title="读写状态,点击可设值">
									<span :class="item.value == 1 ? 'bt_inner_on' : 'bt_inner_off'"></span>
								</div>
								<i v-else-if="item.show_type == 7" class="el-icon-bell"
									:class="item.value ==1? 'alarm_on' : 'alarm_off'" title="只读报警"></i>
								<i v-else-if="item.show_type == 13" class="el-icon-bell"
									:class="item.value==1?'alarm_off':item.value==0?'alarm_on':'alarm_off'"
									title="只读报警(反)"></i>
								<i v-else-if="item.show_type == 8 && item.value" class="el-icon-message-solid alarm_on"
									title="读写报警,点击可清除" @click="changeState3(item)"></i>
								<i v-else-if="item.show_type == 8 && !item.value"
									class="el-icon-message-solid alarm_off" title="读写报警,未报警,不可操作"></i>
								<span v-else-if="item.show_type == 9" class="read" title="只读字符串"
									style="width: 100%">{{ item.value }}</span>
								<span v-else-if="item.show_type == 10" class="write" @click="changeVal(item)"
									title="读写字符串，点击可设值" style="width: 100%">{{ item.value }}</span>
								<el-radio-group v-else-if="item.show_type == 11" v-model="item.value" title="只读多位开关"
									:disabled="true">
									<el-radio v-for="(value, key, index) in item.ext_vars" :key="index"
										:label="Number(key)" class="rad over">{{ value }}</el-radio>
								</el-radio-group>
								<el-radio-group v-else-if="item.show_type == 12" v-model="item.value"
									@change="changeState4(item)" title="读写多位开关，点击可设值" :disabled="false">
									<el-radio v-for="(value, key, index) in item.ext_vars" :key="index"
										:label="Number(key)" class="rad over">{{ value }}</el-radio>
								</el-radio-group>
								<span v-if="item.show_type == 1 || item.show_type == 2"
									style="display: inline-block; vertical-align: top">{{ item.unit }}</span>
							</div>
							<div class="roundline" style="margin-top: 2px">
								<span class="sensorName over" :class="item.show_type % 2 == 0 ? 'green' : ''"
									:title="item.sensor_name">{{ item.sensor_name }}</span>
							</div>
						</div>
					</div>
				</div>
				<div v-else style="width: 100%; text-align: center; font-size: 16px">
					该设备暂无参数数据点
				</div>
			</div>
			<el-dialog :width="win.screen.width>=1600?'80%':'84%'" v-el-dialog-drag :visible.sync="innerVisible"
				append-to-body :show-close="close" :top="win.screen.width>=1600?'200px':'50px'" class="dial">
				<div class="toptit">
					<span>{{ option }}</span> | <span>{{ which }}</span>
					<span style="float: right; cursor: pointer" @click="closeInside">关闭</span>
				</div>
				<span v-if="line == 'history'" style="font-size: 0.35rem; margin-left: 0.1rem">历史时段:</span>
				<el-date-picker v-if="line == 'history'" v-model="value" type="daterange" align="left"
					class="inpu inptime" style="width: 6rem" @change="changeTime(value)" unlink-panels
					value-format="yyyy-MM-dd" range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期"
					:picker-options="pickerOptions">
				</el-date-picker>
				<div id="myChart" v-show="line == 'history'" v-loading="loading_1"></div>
				<div id="without" v-show="lineout == 'history'">
					抱歉,该数据点暂无历史数据！
				</div>
				<div id="myChartLive" ref="myChartLive" v-show="line == 'live'" v-loading="loading_2"></div>
				<div id="without" v-show="lineout == 'live'">
					抱歉,该数据点暂无实时数据！
				</div>
			</el-dialog>
		</el-dialog>
		<!-- 可变状态改值对话框 -->
		<el-dialog :visible="dialogFormVisible" width="15%" append-to-body top="300px" :show-close="false">
			<div class="toptit">
				<span>{{ sateForm.name }}</span>
				<span style="float: right; cursor: pointer" @click="dialogFormVisible = false">关闭</span>
			</div>
			<el-form :model="sateForm" style="text-align: center; margin-top: 0.2rem" block>
				<el-form-item>
					<el-button type="primary" size="small" class="btn"
						style="background-color: #007aff; color: #fff; width: 1.8rem" @click="setStateVal(0)">置0
					</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" size="small" class="btn"
						style="background-color: #007aff; color: #fff; width: 1.8rem" @click="setStateVal(1)">置1
					</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" size="small" class="btn"
						style="background-color: #007aff; color: #fff; width: 1.8rem" @click="letOneToZero">先置1，后置0
					</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" size="small" class="btn"
						style="background-color: #007aff; color: #fff; width: 1.8rem" @click="letZeroToOne">先置0，后置1
					</el-button>
				</el-form-item>
			</el-form>
			<!-- <div slot="footer" style="text-align:right;margin-top:-0.5rem;">
		    <el-button type="primary" class="btn" style="border:1px solid #ccc;background-color: white;color:#111;" @click="dialogFormVisible=false">取 消</el-button>
		  </div> -->
		</el-dialog>
		<!-- 可清除报警对话框 -->
		<el-dialog :visible="dialogFormVisible_2" width="15%" append-to-body top="250px" :show-close="false">
			<div class="toptit">
				<span>{{ sateForm.name }}</span>
				<span style="float: right; cursor: pointer" @click="dialogFormVisible_2 = false">关闭</span>
			</div>
			<el-form :model="sateForm" style="text-align: center; margin-top: 0.5rem" block>
				<el-form-item>
					<el-button type="primary" size="small" class="btn" style="background-color: #007aff; color: #fff"
						@click="setStateVal(0)">清除</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" size="small" class="btn" style="background-color: #007aff; color: #fff"
						@click="dialogFormVisible_2 = false">保留</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
		<!-- 可控开关改值对话框 -->
		<el-dialog :visible="dialogFormVisible_3" width="15%" append-to-body top="250px" :show-close="false">
			<div class="toptit">
				<span>{{ sateForm.name }}</span>
				<span style="float: right; cursor: pointer" @click="dialogFormVisible_3 = false">关闭</span>
			</div>
			<el-form :model="sateForm" style="text-align: center; margin-top: 0.5rem" block>
				<el-form-item>
					<el-button type="primary" size="small" class="btn" style="background-color: #007aff; color: #fff"
						@click="setStateVal(1)">打开</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" size="small" class="btn" style="background-color: #007aff; color: #fff"
						@click="setStateVal(0)">关闭</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
		<!-- 多位开关改值对话框 -->
		<el-dialog :visible="dialogFormVisible_4" width="18%" append-to-body top="250px" :show-close="false">
			<div class="toptit">
				<span>{{ sateForm.name }}</span>
				<span style="float: right; cursor: pointer" @click="cancelManySwitch">关闭</span>
			</div>
			<span style="color: #111">你确定要设置此多位开关为{{ threeSW }}吗?</span>
			<el-form :model="sateForm" style="text-align: center; margin-top: 0.2rem" class="sate" block>
				<el-form-item>
					<el-radio-group v-model="sateForm.value" style="
              display: flex;
              justify-content: space-between;
              flex-wrap: wrap;
            ">
						<el-radio v-for="(value, key, index) in sateForm.ext_vars" :key="index" :label="Number(key)"
							class="rad">{{ value }}({{ key }})</el-radio>
					</el-radio-group>
				</el-form-item>
			</el-form>
			<div slot="footer" style="text-align: right; margin-top: -0.5rem">
				<el-button size="small" @click="cancelManySwitch">取 消</el-button>
				<el-button type="primary" size="small" style="margin-left: -0.1rem"
					@click="setStateVal(sateForm.value)">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		name: "home",
		data() {
			return {
				win: window,
				parents:[],
				one: 1,
				zero: 0,
				box: "live",
				//grade: Number(localStorage.getItem("grade")),
				site_name: localStorage.getItem("site_name") || '云控物联平台',
				address: "",
				
				Socket: null,
				wsUrl: this.$wssUrl,

				alarmTimer: null,
				alarmSocket: null,
				IP: "",
				users: 0,
				happens: 0,
				devices: 0,
				alarmEq: 0,
				lineDev: 0,
				//alarms: 0,
				//livedata: [],
				//livetimes: [],
				eqid: 0,
				groupId: 0,
				keyLen: 3,
				threeSW: "",
				full: false,
				screen: false,
				mapForm: {
					product_id:[1],
					state: 0
				},
				options: [{
					value: 0,
					label: '全部'
				}],
				states: [{
						value: 0,
						label: '全部'
					},
					{
						value: 1,
						label: '在线正常'
					},
					{
						value: 2,
						label: '在线报警'
					},
					{
						value: 3,
						label: '设备离线'
					}
				],
				mapLoading: true,
				showAlarm: false,
				equip: "",
				option: "",
				which: "",
				loading_1: true,
				loading_2: true,
				timer: null,
				points: [],
				baseurl: this.$baseurl,
				time: "",
				btn: true,
				isOn: 0,
				close: false,
				userId: 0,
				city: "",
				//datas: {},
				showmap: false,
				markers: [],
				line: "",
				lineout: "",
				//hisYdata: [],
				//hisXdata: [],
				equipdata: [],

				//myChart: {},
				//liveDatas: {},
				chart_2: null,
				hisdata: null,
				//myChartLive: {},
				future: "",
				item: {},
				dialogFormVisible: false,
				dialogFormVisible_2: false,
				dialogFormVisible_3: false,
				dialogFormVisible_4: false,
				sateForm: {
					name: "",
					value: "",
					id: 0,
					ext_vars: {}
				},
				outerVisible: false,
				innerVisible: false,
				stateWidth: 56,
				// fullscreen:false,
				all: false,
				poid: 0,
				map: null,
				myIcon: null,
				lostDevice: [],
				alarmDevice: [],
				alarmStr: '',
				isPlay: true,
				// voice:{
				// 	src:'',
				// 	muted:false
				// },
				speechMsg: null,
				speechVoice: null,
				pointdata: [],
				liveData: {},
				varsData: [],
				group: "",
				groups: [],
				value: [],
				deviceType: 1,
				groupsCount: 1,
				isFullscreen: false,
				pickerOptions: this.$pickerOptionsSimple,
				ch_option: {
					title: {
						text: "历史时段数据变化",
						top: 5
					},
					grid: {
						width: "92%",
						height: "280px",
						left: "4%",
						top: 75
					},
					toolbox: {
						show: true,
						right: 30,
						feature: {
							dataZoom: {
								show: false
							},
							dataView: {
								show: false,
								readOnly: true
							},
							magicType: {
								type: ["line", "bar"]
							},
							restore: {},
							saveAsImage: {}
						}
					},
					dataZoom: [{
						id: "dataZoomX",
						type: "slider",
						show: true,
						start: 95,
						end: 100,
						xAxisIndex: [0],
						filterMode: "filter",
						fillerColor: "#666",
						backgroundColor: "#ccc",
						handleStyle: {
							color: "red"
						}
					}],
					tooltip: {
						trigger: "axis"
					},
					xAxis: {
						data: [],
						name: "时间",
						boundaryGap: false,
						axisLabel: {
							margin: 10,
							showMinLabel: true,
							showMaxLabel: true
						},
						axisTick: {
							alignWithLabel: true
						}
					},
					yAxis: {
						type: "value",
						name: "值"
					},
					series: [{
						name: "",
						type: "line",
						data: [],
						// lineStyle:{//数据线的颜色
						// 	color:"deepskyblue"
						// },
						markPoint: {
							data: [{
								type: "max",
								name: "最大值"
							}, {
								type: "min",
								name: "最小值"
							}]
						},
						markLine: {
							data: [{
								type: "average",
								name: "平均值"
							}]
						},
						smooth: true
					}]
				},
				live_option: {
					title: {
						text: "实时同步数据变化"
					},
					grid: {
						width: "92%",
						height: "300px",
						left: "4%",
						top: 80
					},
					tooltip: {
						trigger: "axis"
					},
					xAxis: {
						data: [],
						name: "时间",
						boundaryGap: false,
						axisLabel: {
							margin: 10,
							showMinLabel: true,
							showMaxLabel: true
						},
						axisTick: {
							alignWithLabel: true
						}
					},
					yAxis: {
						type: "value",
						name: "值"
					},
					series: [{
						name: "",
						type: "line",
						data: [],
						markPoint: {
							data: [{
								type: "max",
								name: "最大值"
							}, {
								type: "min",
								name: "最小值"
							}]
						},
						markLine: {
							data: [{
								type: "average",
								name: "平均值"
							}]
						},
						smooth: true
					}]
				}
			};
		},

		created() {
			
			//this.isPlay = localStorage.getItem("alarmVoice")=="true"?true:false;
			//this.speechMsg = new SpeechSynthesisUtterance();
			//this.speechMsg.lang="zh-CN";
			//this.speechVoice = window.speechSynthesis;
			//this.speechMsg.voice = this.getWindowVoice(); 
			this.$message.closeAll();
			this.$notify.closeAll();
			this.userId = localStorage.getItem("at_userId");
			this.value = [this.getNowFormatDay(), this.getNowFormatDay()];
			//this.unitData();
			//this.getParent();
			this.time = this.getNowFormatDateS();
		},
		mounted() {
			var that = this;
			
			//this.getAllAlarm();
			//setTimeout(function(){
			//that.showMap();
			//},1000);
			//this.showMap();
			this.getEquip(0, '', '', true);
			setTimeout(function() {
				var oldHeight = that.$refs.content.offsetHeight;
				if (window.innerHeight == window.screen.availHeight - 71) {
					//document.getElementById("mainIframe").style.height=(1200+30)+'px';
					that.$refs.content.style.cssText +=
						";height:" + (oldHeight + 32) + "px!important";
				}
			}, 3000);
		},
		methods: {
			
			getParent(){
				var that=this;
				this.$http({
					method: 'post',
					url: '/api/product/tree',
					data: {}
				}).then(res => {
					if (res && res.data.result == "success") {
						this.parents=res.data.data;
						//console.log(res.data.data);
						
					}
					//console.log("charu")
				}).catch(error => {
					
					console.log(error);
				});
			},
			
			handleChange(par){
				console.log(par);
				//this.mapForm.product_id = this.mapForm.product_id[this.mapForm.product_id.length-1];
				this.changeMapDeviceState(par,this.mapForm.state);
			},
			//实时报警全局函数,这里只用于更换图标；
			getAllAlarm() {
				var that = this;
				//console.log("homeAlarm");
				this.alarmSocket = new WebSocket(this.wsUrl);
				if (this.alarmSocket.readyState != WebSocket.OPEN) {
					this.alarmSocket.onopen = function() {
						var pingData = {
							action: "alarm",
							data: {
								user_id: localStorage.getItem('at_userId'),
								token: localStorage.getItem("attoken")
							}
						};
						that.alarmSocket.send(JSON.stringify(pingData));
						that.alarmTimer = setInterval(function() {
							that.alarmSocket.send(JSON.stringify(pingData));
						}, 40000);
						console.log('连接成功')
					};
				};
				this.alarmSocket.onerror = this.onAlarmError;
				this.alarmSocket.onmessage = this.onAlarmMessage;
			},

			onAlarmError(e) {
				var that = this;
				//console.log("连接失败，尝试重连")
				this.alarmSocket.close();
				clearInterval(that.alarmTimer);
				//this.getALLAlarm();
			},


			onAlarmMessage(msg) {
				var that = this;
				var messageData = JSON.parse(msg.data);
				//console.log(messageData);
				if (messageData.result == "success" && this.isObject(messageData.data)) {
					var liveDatas = messageData.data;
					//console.log(liveDatas);
					var icon = "";
					if (liveDatas.status == 'alarm') { //报警
						icon = "https://gou-bin.oss-cn-beijing.aliyuncs.com/yunken/alarmOne.gif";
					} else if (liveDatas.status == 'connect' || liveDatas.status == 'online') {
						icon = "https://gou-bin.oss-cn-beijing.aliyuncs.com/yunken/online.png";
					} else if (liveDatas.status == 'disconnect' || liveDatas.status == 'powerdown') {
						icon = "https://gou-bin.oss-cn-beijing.aliyuncs.com/yunken/down.png";
					}
					this.unitData();
					for (let i = 0, len = this.equipdata.length; i < len; i++) {
						if (this.equipdata[i].id == liveDatas.equip_id) {
							this.equipdata[i].stateIcon = icon;
							for (let m = 0, len2 = this.markers.length; m < len2; m++) {
								if (this.markers[m].w.label.content == liveDatas.equip_name) {
									this.markers[m].setIcon(new AMap.Icon({
										size: [26, 32],
										imageSize: [26, 32],
										image: icon
									}));
									this.markers[m].setTop(true); //如多个聚集，至于顶层
									//this.markers[m].setAnimation("AMAP_ANIMATION_DROP");  //动画效果，掉落动画
									break;
								}
							}
							break;
						}
					}
				} else {
					console.log(messageData.message);
				}
			},


			getProduct() {
				this.options = [{
					value: 0,
					label: '全部'
				}];
				this.$http({
					method: 'post',
					url: 'api/product/all',
					data: {}
				}).then(res => {
					if (res && res.data.result == "success") {
						for (var i = 0; i < res.data.data.length; i++) {
							var option = {
								value: res.data.data[i].id,
								label: res.data.data[i].product_name
							}
							this.options.push(option);
						}
						this.mapForm.product_id = this.options[0].value;
					}
				}).catch(error => {
					console.log(error);
				});
			},
			//读写状态改值
			changeState2(item) {
				this.dialogFormVisible = true;
				this.sateForm.name = item.sensor_name;
				this.sateForm.id = item.id;
			},
			//读写报警改值
			changeState3(item) {
				this.dialogFormVisible_2 = true;
				this.sateForm.name = item.sensor_name;
				this.sateForm.id = item.id;
			},
			//读写多位开关改值
			changeState4(item) {
				if (item.read_write == 2) {
					event.preventDefault();
					this.dialogFormVisible_4 = true;
					this.sateForm.name = item.sensor_name;
					this.sateForm.id = item.id;
					this.sateForm.value = item.value;
					this.sateForm.ext_vars = item.ext_vars;
					//this.keyLen=Object.keys(item.ext_vars).length;
					this.threeSW = item.ext_vars[this.sateForm.value];
				} else {
					this.$message({
						type: "info",
						duration: 2000,
						message: "只读类型，不可操作!"
					});
				}
			},

			cancelManySwitch() {
				var that = this;
				this.dialogFormVisible_4 = false;
				this.refreshFun(1000);
			},

			letOneToZero() {
				var that = this;
				this.$http({
						method: "post",
						url: "api/sensor/write",
						data: {
							id: this.sateForm.id,
							value: 1
						}
					})
					.then(res => {
						if (res && res.data.result == "success") {
							this.setStateVal(0);
						}
					})
					.catch(error => {
						console.log(error);
					});
			},

			letZeroToOne() {
				var that = this;
				this.$http({
						method: "post",
						url: "api/sensor/write",
						data: {
							id: this.sateForm.id,
							value: 0
						}
					})
					.then(res => {
						if (res && res.data.result == "success") {
							this.setStateVal(1);
						}
					})
					.catch(error => {
						console.log(error);
					});
			},

			changeGroup(group) {
				var that = this;
				clearInterval(that.timer);
				//这里不能关闭Socket
				// if(this.Socket){
				//    this.Socket.close();
				// }
				this.groupId = group;
				this.getView(group);
				setTimeout(function() {
					that.Socket.onopen();
				}, 1000);
			},
			setStateVal(val) {
				var that = this;
				this.$http({
						method: "post",
						url: "api/sensor/write",
						data: {
							id: this.sateForm.id,
							value: val
						}
					})
					.then(res => {
						if (res && res.data.result == "success") {
							if (this.dialogFormVisible) {
								this.$message({
									message: "恭喜,修改状态成功!",
									type: "success",
									center: true
								});
								this.dialogFormVisible = false;
							} else if (this.dialogFormVisible_2) {
								this.$message({
									message: "恭喜,清除报警成功!",
									type: "success",
									center: true
								});
								this.dialogFormVisible_2 = false;
							} else if (this.dialogFormVisible_3) {
								this.$message({
									message: "恭喜,开关操作成功!",
									type: "success",
									center: true
								});
								this.dialogFormVisible_3 = false;
							} else if (this.dialogFormVisible_4) {
								this.$message({
									message: "恭喜,多位开关操作成功!",
									type: "success",
									center: true
								});
								this.dialogFormVisible_4 = false;
							}
						} else {
							this.refreshFun(1000);
						}
						this.dialogFormVisible_4 = false;
						this.dialogFormVisible_3 = false;
						this.dialogFormVisible_2 = false;
						this.dialogFormVisible = false;
					})
					.catch(error => {
						console.log(error);
					});
			},
			
			websocketConnect(id) {
				var that = this;
				this.Socket = new WebSocket(this.wsUrl);
				if (this.Socket.readyState !== WebSocket.OPEN) {
					this.Socket.onopen = function() {
						setTimeout(function() {
							var pingData = {
								action: "ping",
								data: {
									user_id: localStorage.getItem("at_userId"),
									equip_id: id,
									token: localStorage.getItem("attoken")
								}
							};
							that.Socket.send(JSON.stringify(pingData));
							that.refreshData(id);
							that.timer = setInterval(function() {
								that.Socket.send(JSON.stringify(pingData));
							}, 30000);
						}, 600);
			
						console.log("连接成功");
					};
				}
				this.Socket.onerror = this.onError;
				this.Socket.onmessage = this.onMessage;
			},

			//改为按组显示后，只能刷新整个设备的数据；
			refreshFun(second = 1000) {
				var that = this;
				setTimeout(function() {
					that.refreshData(that.eqid);
				}, second);
			},
			
			getWindowVoice() { // 获取浏览器中语音 (中文 + 本地服务)
				return window.speechSynthesis.getVoices().find(item => item.localService && item.lang === 'zh-CN')
			},
			
			getAddress(event) {
				console.log(event.target.innerText)
			},
			

			addMarker(point, data) {
				var that = this;
				var status = "";
				if (data.is_on) {
					status = data.is_alarm ? '报警' : '正常';
				} else {
					status = '离线';
				}
				var marker = new AMap.Marker({
					map: that.map,
					icon: new AMap.Icon({
						size: [26, 32],
						imageSize: [26, 32],
						image: data.stateIcon
					}),
					position: point,
					offset: new AMap.Pixel(-13, -32),
					label: {
						//content: data.equip_name + "　所在项目:" + data.product_name + "　状态:"+status,
						//content: data.equip_name + '(' + status + ')',
						content: data.equip_name,
						offset: new AMap.Pixel(-4, -20),
						direction: "right"
					}
					//title:data.equip_name + "　所在项目:" + data.product_name + "　状态:"+status,
					//offset: new AMap.Pixel(-13,-32)
				});

				marker.setTitle("点击可查看数据");
				//marker.setShadow(data.stateIcon);//设置标记的阴影
				//setTimeout(function() {
				this.markers.push(marker);
				this.map.add(marker);
				//marker.setMap(that.map);
				//}, 500);


				//清除点击事件弹出对话框之后，地图会跟随鼠标移动的问题；
				marker.on("mousemove", function() {
					event.stopPropagation();
					event.preventDefault();
					event.stopImmediatePropagation();
					// marker.label = {
					//     content: '设备' + status,
					//     direction: "left"
					// };
				});
				marker.on("click", function() {
					if (data.run_mode == 2) {
						that.$message({
							message: "透传设备无数据显示!",
							type: "info",
							offset: 300,
							center: true
						})
						return
					}
					that.outerVisible = true;
					clearInterval(that.timer);
					if (that.Socket) {
						that.Socket.close();
					}
					setTimeout(function() {
						if (that.pointdata.length <= 6) {
							that.$refs.databox.style.height = "5rem";
						} else {
							that.$refs.databox.style.height = "7.5rem";
						}
					}, 1000);
					that.eqid = data.id;
					that.deviceType = data.type;
					that.groupsCount = data.groups_count;
					if (data.type == 1 && data.groups_count > 1) {
						that.getGroup(data.id);
					} else {
						that.getView(data.id);
					}
					that.isOn = data.is_on;
					that.websocketConnect(that.eqid);
					that.equip = data.equip_name;
					that.liveData = {
						"id": data.id,
						"equip_name": data.equip_name,
						"groups_count": data.groups_count,
						"product_id": data.product_id,
						"product_name": data.product_name,
						"product_index": data.product_index,
						"type": data.type,
						"view_id": data.view_id
					};
					//console.log(that.liveData);
				});
			},

			

			addManyMarker() {
				var that = this;
				this.lostDevice = [];
				this.alarmDevice = [];
				//this.points = [];
				//this.$notify.closeAll();
				if (that.equipdata.length) {
					for (var i = 0; i < that.equipdata.length; i++) {
						if (that.equipdata[i]) {
							if (
								that.equipdata[i].geo_coord && Number(that.equipdata[i].geo_coord[0]) > 70 && Number(that
									.equipdata[i].geo_coord[0]) < 140 && Number(that.equipdata[i].geo_coord[1]) > 1 &&
								Number(that.equipdata[i].geo_coord[1]) < 60
							) {
								var point = [
									that.equipdata[i].geo_coord[0],
									that.equipdata[i].geo_coord[1]
								];
								//that.points.push(point);
								that.addMarker(point, that.equipdata[i]);
							} else {
								if (that.equipdata[i].type != 3) {
									that.lostDevice.push(that.equipdata[i].equip_name);
								}
							}
						}
					}

					
					if (that.lostDevice[0]) {
						//如果不延时，将于上面的数据点报警产生重叠
						setTimeout(function() {
							that.$notify({
								title: "设备定位报警提示:",
								dangerouslyUseHTMLString: true,
								message: '<div style="display:block;text-align:left;max-height:260px;width:220px;overflow:auto;line-height:20px;margin:0 auto;padding-right:10px;text-indent:0;padding-left:0;position:relative;z-index:3;">以下设备(共' +
									that.lostDevice.length +
									'台)，坐标异常，未在地图上标注，请查看位置!</br><span style="color:red;">' +
									that.lostDevice.join("</br>") +
									"</span></div>",
								duration: 0,
								offset: 180
							});
						}, 500);
					}
				} else {
					that.$message({
						message: "暂时没有可以标注的设备!",
						type: "warn",
						offset: 300,
						center: true
					});
					that.map.setZoomAndCenter(5, "西安");
				}
			},

			
			mapStart() {
				var that = this;
				//setTimeout(function() {
				this.map = new AMap.Map(that.$refs.content, {
					resizeEnable: true,
					expandZoomRange: true,
					enableHighAccuracy: true
					//下面为图层设置
					//layers: [new AMap.TileLayer.Satellite(),new AMap.TileLayer.RoadNet()]
				});
				
				//AMap.plugin(["AMap.Scale","AMap.GraspRoad"], function() {
				AMap.plugin(["AMap.Scale"], function() {	
					// 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
					//that.map.addControl(new AMap.ToolBar());
				
					// 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
					that.map.addControl(new AMap.Scale());
					//轨迹纠偏插件
					//that.map.addControl(new AMap.GraspRoad());
				
					// 在图面添加鹰眼控件，在地图右下角显示地图的缩略图
					//map.addControl(new AMap.OverView({isOpen:true}));
				
					// 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
					//that.map.addControl(new AMap.MapType());
				
					// 在图面添加定位控件，用来获取和展示用户主机所在的经纬度位置
					// map.addControl(new AMap.Geolocation());
				});
				
				// //轨迹和轨迹纠偏测试
				// var graspRoad;
				// //sp速度，ag角度，这两个可以为0，但不能没有
				// //tm以秒为单位，第一个采集点的tm值从1970年0点开始，其他采集点为与第一个采集点时间的差值
				// //从第二个点开始，tm应该是递增的；
				// //用纠偏，sp,ag,tm三者必须有，不用纠偏三者都可以没有
				// var pathParam = [
				// {"x":116.478928,"y":39.997761,"sp":19,"ag":0, "tm":1478031031},
				// {"x":116.478907,"y":39.998422,"sp":10,"ag":0, "tm":2},
				// {"x":116.479384,"y":39.998546,"sp":10,"ag":110,"tm":3},
				// {"x":116.481053,"y":39.998204,"sp":10,"ag":120,"tm":4},
				// {"x":116.481793,"y":39.997868,"sp":10,"ag":120,"tm":5},
				// {"x":116.482898,"y":39.998217,"sp":10,"ag":30, "tm":6},
				// {"x":116.483789,"y":39.999063,"sp":10,"ag":30, "tm":7},
				// {"x":116.484674,"y":39.999844,"sp":10,"ag":30, "tm":8}];
				// var path1 = [];
				// for(var i=0;i<pathParam.length;i+=1){
				//   path1.push([pathParam[i].x,pathParam[i].y])
				// }
				// var oldLine = new AMap.Polyline({
				//   path:path1,
				//   strokeWeight:8,
				//   strokeOpacity:1,
				//   strokeColor:'red'
				// })
				// this.map.add(oldLine)
				// if(!graspRoad) {
				// 	graspRoad = new AMap.GraspRoad()
				// }
				
				// graspRoad.driving(pathParam,function(error,result){
				// 	  if(!error){
				// 		var path2 = [];
				// 		var newPath = result.data.points;
				// 		for(var i =0;i<newPath.length;i+=1){
				// 		  path2.push([newPath[i].x,newPath[i].y])
				// 		}
				// 		var newLine = new AMap.Polyline({
				// 		  path:path2,
				// 		  strokeWeight:8,
				// 		  strokeOpacity:0.8,
				// 		  strokeColor:'#0091ea',
				// 		  showDir:true
				// 		})
				// 		that.map.add(newLine);
				// 		//that.map.setFitView()
				// 	  }
				// })
				//测试结束
				
				//设置地图主题颜色
				//可选的值有：normal(默认),dark,light,whitesmoke,fresh,grey,graffiti,macaron,blue,darkblue,wine；
				//var styleName = "amap://styles/darkblue";
				//that.map.setMapStyle(styleName);
				//设置主题结束

				// that.map.hotspotover=function(){
				//    event.stopPropagation();
				//    event.preventDefault();
				//    event.stopImmediatePropagation();
				// }
				
               
				this.addManyMarker();
				if (window.screen.height == 1200 && window.screen.width == 1920) {
					this.$refs.content.removeAttribute("id", "content");
				} else {
					this.$refs.content.style.height = 13.5 + "rem";
				}

				window.document.getElementById("mapbtn").style.display = "inline-block";
				// }, 500);
			},

			async showMap() {
				var that = this;
				await this.mapStart();
				//this.mapLoading = false;
				setTimeout(function() {
					that.map.setFitView();
				}, 2000); //2000
			},

			goLiveData() {
				var that = this;
				localStorage.setItem("liveData", JSON.stringify(that.liveData));
				this.$router.push({
					name: 'showData',
					path: '/showData',
					component: 'showData'
					//query:that.liveData   //使用query时，把id变成了字符串，所以不用，使用params，刷新会丢失
				});
			},

			getView(id) {
				var that = this;
				this.pointdata = [];
				this.$http({
						method: "post",
						url: "api/sensor/view",
						data: this.deviceType == 1 && this.groupsCount > 1 ? {
							sgroup_id: id,
						} : {
							equip_id: id,

						}
					})
					.then(res => {
						if (res && res.data.result == "success") {
							//console.log(res.data.data);
							that.pointdata = res.data.data.real;
							that.varsData = res.data.data.vars;
							for (let i = 0, len = that.pointdata.length; i < len; i++) {
								that.pointdata[i].icon =
									that.baseurl + res.data.data.real[i].icon;
								that.$set(that.pointdata[i], "value", null);
							}

							for (let i = 0, len = that.varsData.length; i < len; i++) {
								that.varsData[i].icon = that.baseurl + res.data.data.vars[i].icon;
								that.$set(that.varsData[i], "value", null);
							}
						}
						// console.log(that.pointdata[0].icon)
					})
					.catch(error => {
						console.log(error);
					});
			},

			getGroup(id) {
				var that = this;
				this.groups = [];
				this.$http({
						method: "post",
						url: "api/sensorGroup/all",
						data: {
							'equip_id': id,

						}
					})
					.then(res => {
						if (res && res.data.result == "success") {
							for (var i = 0; i < res.data.data.length; i++) {
								var group = {
									value: res.data.data[i].id,
									label: res.data.data[i].sgroup_name
								};
								that.groups.push(group);
							}
							if (that.groups[0]) {
								that.group = that.groups[0].value;
								that.groupId = that.groups[0].value;
								that.getView(that.groups[0].value);
							} else {
								that.group = "暂无分组";
							}
						}
						// console.log(that.pointdata[0].icon)
					})
					.catch(error => {
						console.log(error);
					});
			},

			getNowFormatDay() {
				//获取当前年月日
				var date = new Date();
				var seperator1 = "-";
				// var seperator2 = ":";
				var month =
					date.getMonth() + 1 < 10 ?
					"0" + (date.getMonth() + 1) :
					date.getMonth() + 1;
				var strDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
				var minutes =
					date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
				var currentdate =
					date.getFullYear() + seperator1 + month + seperator1 + strDate;

				return currentdate;
			},

			//改为按组显示后，刷新只能刷新整个设备的数据 
			refreshData(id) {
				var that = this;
				this.$http({
						method: "post",
						url: "api/equip/refresh",
						data: {
							id: id,
							mode: "all"
						}
					})
					.then(res => {
						if (res && res.data.result == "success") {
							console.log("数据刷新成功");
						}
					})
					.catch(error => {
						console.log(error);
					});
			},

			//修改数值和字符串的函数
			changeVal(item) {
				var that = this;
				this.$prompt(
						"您正在改写" +
						'<span style="color:red;">' +
						item.sensor_name +
						"</span>" +
						"的值,请慎重操作!",
						item.sensor_name, {
							confirmButtonText: "确定",
							cancelButtonText: "取消",
							inputPattern: /^-{0,1}\d+(\.\d+)?$/,
							dangerouslyUseHTMLString: true,
							inputPlaceholder: item.value,
							inputErrorMessage: item.show_type == 2 ? "设值错误，值必须为数字！" : ""
						}
					)
					.then(({
						value
					}) => {
						if (value) {
							this.$http({
									method: "post",
									url: "api/sensor/write",
									data: {
										id: item.id,
										value: value

									}
								})
								.then(res => {
									if (res && res.data.result == "success") {
										that.$message({
											message: "恭喜,写入数据点成功!",
											type: "success",
											center: true
										});
									}
									// console.log(that.pointdata[0].icon)
								})
								.catch(error => {
									console.log(error);
								});
						} else {
							this.$message({
								type: "error",
								message: "修改失败，修改值不能为空！",
								center: true
							});
						}
					})
					.catch(() => {
						this.$message({
							type: "info",
							message: "取消设值!"
						});
					});
			},

			changeState(item, event) {
				event.stopPropagation();
				event.stopImmediatePropagation();
				let state = "";
				state = event.target.checked ? '打开' : '关闭';
				let newValue = state == '打开' ? 1 : 0;
				this.$confirm(
						"您确定要" + state + "当前开关吗？" + state + "后,将无法撤销,是否确认?",
						state + item.sensor_name, {
							confirmButtonText: "确定",
							cancelButtonText: "取消",
							type: "warning"
						}
					)
					.then(() => {
						this.$http({
								method: "post",
								url: "api/sensor/write",
								data: {
									id: item.id,
									value: newValue

								}
							})
							.then(res => {
								if (res && res.data.result == "success") {
									this.$message({
										message: "恭喜,修改数据点状态成功!",
										type: "success",
										center: true
									});
								} else {
									this.refreshFun(1000);
								}
							})
							.catch(error => {
								console.log(error);
							});
					})
					.catch(() => {
						this.$message({
							type: "info",
							message: "已取消修改,将自动恢复！"
						});
						//新开关取消不能自动恢复，人为恢复；
						if (event.target.checked) {
							event.target.checked = false;
						} else {
							event.target.checked = true;
						}
						this.refreshFun(1000);
					});
			},

			changeTime() {
				this.roundLineHis(this.item);
			},

			backWeb() {
				this.full = false;
				this.$refs.databox.style.overflow = "auto";
				if (this.pointdata.length <= 6) {
					this.$refs.databox.style.height = "5rem";
				} else {
					// document.getElementById("databox").style.overflow='auto!important';
					this.$refs.databox.style.height = "7.5rem";
				}
			},
			fullWeb() {
				this.full = true;
				this.$refs.databox.style.overflow = "visible";
				// document.getElementById("databox").style.height='16.5rem';
			},
			closeOutside() {
				var that = this;
				this.outerVisible = false;
				if (this.Socket && this.timer) {
					clearInterval(that.timer);
					this.Socket.close();
				}
			},
			closeInside() {
				this.innerVisible = false;
				this.line = "";
				this.poid = 0;
				this.value = [this.getNowFormatDay(), this.getNowFormatDay()];
			},
			unitData() {
				var that = this;
				this.$http({
						method: "post",
						url: "api/index/console",
						data: {}
					}).then(res => {
						if (res && res.data.result == "success") {
							this.users = res.data.data.count.user || 0;
							//this.happens = res.data.data.count.trigger || 0;
							this.devices = res.data.data.count.equip.count || 0;
							this.lineDev = res.data.data.count.equip.online || 0;
							//this.alarmEq = res.data.data.count.equip.alarm || 0;
							//this.alarms = res.data.data.count.alarm || 0;
							this.IP = res.data.data.ip;
							if (localStorage.getItem("isFirst")) {
								//if (this.grade < 3) {
									this.$notify({
										title: '登录提示',
										dangerouslyUseHTMLString: true,
										duration: 6000, //默认4500ms
										message: `<p>您好，欢迎登录${this.site_name}系统！当前登录时间为<span style='color:#000;font-weight:700;'>${this.time}</span>，当前登录IP为：<span style='color:#000;font-weight:700;'>${ this.IP }</span></p>`,
										position: 'bottom-right'
									});
								//}
								setTimeout(function() {
									that.$notify({
										title: '标注图示:',
										dangerouslyUseHTMLString: true,
										duration: 5000, //默认4500ms
										message: `<div style="height:auto;line-height:30px;">
													<p><img src="https://gou-bin.oss-cn-beijing.aliyuncs.com/yunken/online.png" style="width:12px;height:24px;vertical-align:middle;"/> <span>-在线正常</span></p>
													<p><img src="https://gou-bin.oss-cn-beijing.aliyuncs.com/yunken/alarmOne.gif" style="width:12px;height:24px;vertical-align:middle;"/> <span>-在线报警</span></p>
													<p><img src="https://gou-bin.oss-cn-beijing.aliyuncs.com/yunken/down.png" style="width:12px;height:24px;vertical-align:middle;"/> <span>-设备离线</span></p>
												  </div>`,
										position: 'bottom-right'
										//offset: 180
									});
								}, 500)
								localStorage.removeItem("isFirst");
							}
						}
					})
					.catch(error => {
						console.log(error);
					});
			},
			getEquip(id = 0, isOn = '', isAlarm = '', isfirst = true) {
				var that = this;
				var time = (id == 0 && isOn === '' && isAlarm === '') ? 2000 : 1000;
				this.mapLoading = isfirst ? true : false;
				this.equipdata = [];
				this.markers = [];
				this.$http({
						method: "post",
						async: false, //async属性为false 时是同步,为true时是异步
						url: "api/equip/all",
						data: {
							"product_id": id,
							"is_on": isOn,
							"is_alarm": isAlarm
						}
					}).then(res => {
						if (res && res.data.result == "success") {
							this.equipdata = Array.from(res.data.data);
							for (let i = 0, len = this.equipdata.length; i < len; i++) {
								this.$set(this.equipdata[i], 'stateIcon', '');
								if (this.equipdata[i].is_on == 0) {
									this.equipdata[i].stateIcon =
										"https://gou-bin.oss-cn-beijing.aliyuncs.com/yunken/down.png";
								} else if (this.equipdata[i].is_on == 1) {
									if (this.equipdata[i].is_alarm == 1) {
										this.equipdata[i].stateIcon =
											"https://gou-bin.oss-cn-beijing.aliyuncs.com/yunken/alarmOne.gif";
									} else {
										this.equipdata[i].stateIcon =
											"https://gou-bin.oss-cn-beijing.aliyuncs.com/yunken/online.png";
									}
								}
								if (i == len - 1) {
									break;
								}
							}
							if (isfirst) {
								this.showMap();
							} else {
								this.addManyMarker();
								setTimeout(function() {
									that.map.setFitView();
								}, time);
							}
							//this.mapLoading = false;
						} else {
							this.showMap();
						}
						this.screenChangeStyle();
						this.mapLoading = false;
					})
					.catch(error => {
						this.mapLoading = false;
						console.log(error);
					});

			},

			changeMapDeviceState(product, state) {
				var id=product[product.length-1];
				this.$notify.closeAll();
				this.map.clearMap();
				switch (state) {
					case 0: //全部
						this.getEquip(id, '', '', false);
						break;
					case 1: //在线正常
						this.getEquip(id, 1, 0, false);

						break;
					case 2: //在线报警
						this.getEquip(id, 1, 1, false);
						break;
					case 3: //离线
						this.getEquip(id, 0, '', false);
						break;
					default:
						this.getEquip(id, '', '', false);
						break;
				}
			},

			// getAlarmDevice(){
			// 	this.mapLoading = true;
			// 	this.$notify.closeAll();
			// 	this.showAlarm = true;
			// 	this.$http({
			// 			method: "post",
			// 			async: false, //async属性为false 时是同步,为true时是异步
			// 			url: "api/equip/all",
			// 			data: {
			// 				'is_alarm':1
			// 			}
			// 		}).then(res => {
			// 			if (res && res.data.result == "success") {
			// 				this.equipdata = res.data.data;
			// 				this.showMap();
			// 				//this.mapLoading = false;
			// 			} else {
			// 				this.showMap();
			// 			}
			// 			this.mapLoading = false;
			// 		})
			// 		.catch(error => {
			// 			this.mapLoading = false;
			// 			console.log(error);
			// 		});

			// },

			getNowFormatDate() {
				//获取当前时间无秒值
				var date = new Date();
				var seperator1 = "-";
				var seperator2 = ":";
				var month =
					date.getMonth() + 1 < 10 ?
					"0" + (date.getMonth() + 1) :
					date.getMonth() + 1;
				var strDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
				var minutes =
					date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
				var currentdate =
					date.getFullYear() +
					seperator1 +
					month +
					seperator1 +
					strDate +
					" " +
					date.getHours() +
					seperator2 +
					minutes;
				return currentdate;
			},
			getNowFormatDateS() {
				//获取当前时间有秒值
				var date = new Date();
				var seperator1 = "-";
				var seperator2 = ":";
				var month =
					date.getMonth() + 1 < 10 ?
					"0" + (date.getMonth() + 1) :
					date.getMonth() + 1;
				var strDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
				var minutes =
					date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
				var seconds =
					date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				var currentdate =
					date.getFullYear() +
					seperator1 +
					month +
					seperator1 +
					strDate +
					" " +
					date.getHours() +
					seperator2 +
					minutes +
					seperator2 +
					seconds;
				return currentdate;
			},
			
			onError(e) {
				var that = this;
				console.log("连接失败，尝试重连")
				this.Socket.close();
				clearInterval(that.timer);
				this.websocketConnect(this.eqid);
			},
			isObject(obj) {
				return obj.constructor.toString().indexOf("Object") > -1;
			},
			onMessage(msg) {
				var that = this;
				//数据接
				var messageData = JSON.parse(msg.data);
				//console.log(msg.data.data);
				if (messageData.result == "success") {
					if (messageData.data != [] && messageData.data != {}) {
						var liveDatas = messageData.data;
						// if(liveDatas.equip && liveDatas.equip.is_alarm == 1){
						// 	this.$notify({
						// 		title: '警告',
						// 		message: '当前设备正在报警，请及时处理!',
						// 		type: 'warning',
						// 		duration: 6000,
						// 		offset: 150
						// 	});
						// }
						if (liveDatas.equip && liveDatas.equip.is_on != 1) {
							that.$message({
								message: "当前设备连接中断,请检查设备连接!",
								type: "error",
								duration: 5000,
								center: true
							});
							for (let i = 0, len = that.pointdata.length; i < len; i++) {
								that.pointdata[i].value = null;
							}
							for (let n = 0, len = that.varsData.length; n < len; n++) {
								that.varsData[n].value = null;
							}
						}
						if (liveDatas.data) {
							//没有值的时候，liveDatas.data为null，所以要排除；
							if (
								that.line == "live" &&
								liveDatas.data[that.poid] != undefined &&
								liveDatas.data[that.poid] != null
							) {
								that.live_option.series[0].data.push(
									liveDatas.data[that.poid]
								);
								that.live_option.xAxis.data.push(liveDatas.time.substr(5, 5) + "\n" + liveDatas.time
									.substr(11));
								//that.live_option.series[0].data = that.livedata;
								//that.live_option.xAxis.data = that.livetimes;
								if (
									that.live_option.series[0].data != [] &&
									that.live_option.xAxis.data != []
								) {
									var chart_2 = document.getElementById("myChartLive");
									var myChartLive = echarts.init(chart_2);
									//myChartLive.setOption(that.live_option);
									myChartLive.setOption(that.live_option);
									that.loading_2 = false;
									window.addEventListener("resize", () => {
										myChartLive.resize();
									});
								} else {
									that.line = "";
									that.lineout = "live";
								}
							}
							for (let i = 0, len = that.pointdata.length; i < len; i++) {
								for (let key in liveDatas.data) {
									if (that.pointdata[i].id == key) {
										that.pointdata[i].value = liveDatas.data[key];
									}
								}
							}

							if (that.varsData && that.varsData != []) {
								for (let n = 0, len = that.varsData.length; n < len; n++) {
									for (let key in liveDatas.data) {
										if (that.varsData[n].id == key) {
											that.varsData[n].value = liveDatas.data[key];
										}
									}
								}
							}
						}
					}
				} else {
					console.log(messageData.message);
				}
			},
			onClose(e) {
				//this.Socket.close();
				console.log("连接关闭");
			},

			roundLineHis(item) {
				var that = this;
				this.item = item;
				this.loading_1 = true;
				var hisXdata = [];
				var hisYdata = [];
				this.innerVisible = true;
				this.option = item.sensor_name;
				this.which = "历史曲线";
				this.line = "history";
				this.$http({
						method: "post",
						url: "api/sensor/graph",
						data: {
							id: item.id,
							date_range: that.value.join("~")
						}
					})
					.then(res => {
						if (res && res.data.result == "success") {
							if (res.data.data !== []) {
								for (let i = 0, len = res.data.data.length; i < len; i++) {
									let tim = res.data.data[i].time.substr(5, 5) + "\n" + res.data.data[i].time.substr(
										11);
									hisXdata.push(tim);
									let val = res.data.data[i].value;
									hisYdata.push(val);
								}
								that.ch_option.xAxis.data = hisXdata.reverse();
								that.ch_option.series[0].data = hisYdata.reverse();
								that.ch_option.series[0].name = item.sensor_name;
								var chart = window.document.getElementById("myChart");
								var myChart = echarts.init(chart);
								myChart.setOption(that.ch_option);
								that.loading_1 = false;
								window.addEventListener("resize", () => {
									myChart.resize();
								});
							} else {
								that.line = "";
								that.lineout = "history";
							}
						}
						// console.log(that.pointdata[0].icon)
					})
					.catch(error => {
						console.log(error);
					});
			},
			roundLineLive(item) {
				this.loading_2 = true;
				this.live_option.series[0].data = [];
				this.live_option.xAxis.data = [];
				this.line = "live";
				//this.livetimes = []; //进来之前先清空上次的数据
				//this.livedata = []; //不然会数据混连
				this.refreshFun(500);
				this.innerVisible = true;
				this.option = item.sensor_name;
				this.which = "实时曲线";
				this.poid = item.id;
				this.live_option.series[0].name = item.sensor_name;
			},

			changeBox(event) {
				var that = this;
				if (event.target.id) {
					this.box = event.target.id ? event.target.id : "live";
				}
			},

			fullScreen() {
				this.isFullscreen =
					document.fullScreen ||
					document.mozFullScreen ||
					document.webkitIsFullScreen;
				var content = document.documentElement;
				if (!this.isFullscreen) {

					//进入全屏,多重短路表达式
					(content.requestFullscreen && content.requestFullscreen()) ||
					(content.mozRequestFullScreen && content.mozRequestFullScreen()) ||
					(content.webkitRequestFullscreen &&
						content.webkitRequestFullscreen()) ||
					(content.msRequestFullscreen && content.msRequestFullscreen());
					this.isFullscreen = true;
					this.$message({
						type: "info",
						dangerouslyUseHTMLString: true,
						duration: 5000,
						offset: 400,
						message: "<p style='color:#222;'>如需还原请点击<span style='color:red;'>全屏切换</span>按钮,如需进入浏览器全屏请按键盘<span style='color:red;'>ESC</span>键！</p>"
					});
				} else {
					document.exitFullscreen ?
						document.exitFullscreen() :
						document.mozCancelFullScreen ?
						document.mozCancelFullScreen() :
						document.mozkitExitFullscreen ?
						document.webkitExitFullscreen() :
						"";
					this.isFullscreen = false;
					this.$message.closeAll();
				}
				if (this.isFullscreen) {
					this.$parent.showMenu = false;
				} else {
					this.$parent.showMenu = true;
				}
				this.screenChangeStyle();

			},

			screenChangeStyle() {
				var that = this;
				if (this.isFullscreen) {
					this.$refs.content.removeAttribute("id", "content");
					this.$refs.content.removeAttribute("class", "content");
					this.$refs.content.style.position = "fixed";
					this.$refs.content.style.top = 0;
					this.$refs.content.style.left = 0;
					this.$refs.mapbtn.style.bottom = "0.5rem";
					this.$refs.content.style.width = window.screen.width + "px";
					this.$refs.content.style.height = window.screen.height + "px";
					this.$refs.search.style.position = "fixed";
					//that.map.enableAutoResize();
				} else {
					this.$refs.content.setAttribute("id", "content");
					this.$refs.content.setAttribute("class", "content");
					this.$refs.content.style.position = "relative";
					this.$refs.content.style.top = 0;
					this.$refs.content.style.left = 0;
					this.$refs.content.style.width = "99.5%";
					this.$refs.mapbtn.style.bottom = "0.6rem";
					this.$refs.search.style.position = "absolute";
					if (window.screen.width >= 2560) {
						that.$refs.content.style.height = 21.5 + "rem";
					} else if (window.screen.width <= 1920) {
						that.$refs.content.style.height = 14.5 + "rem";
					}
					//that.map.enableAutoResize();
				}
			}

		},



		beforeDestroy() {
			var that = this;
			//this.speechVoice.cancel();
			clearTimeout();
			if (this.isFullscreen) {
				this.fullScreen();
			}
		},
		destroyed() {
			var that = this;
			this.$message.closeAll();
			this.$notify.closeAll();
			clearInterval(that.timer);
			clearInterval(that.alarmTimer);
			if (this.Socket) {
				this.Socket.close();
				this.Socket.onerror = null;
			}
			if (this.alarmSocket) {
				this.alarmSocket.close();
				this.alarmSocket.onerror = null;
			}
		}
	};
</script>

<style scoped>
	@media all and (max-width: 2560px) {
		#content {
			height:20.5rem !important;
			/*加上important才起作用，可是加上就无法使用大屏切换功能*/
		}
	}

	@media all and (max-width: 1920px) {
		#content {
			height: 13.5rem !important;
			/*加上important才起作用，可是加上就无法使用大屏切换功能*/
		}
	}

	@media all and (max-width: 1600px) {

		/* .itembox_6 {
    min-width: 8rem !important;
    max-width: 12rem !important;
  } */
		/* .valuebox_6 {
    min-width: 8rem !important;
    max-width: 10rem !important;
  } */
		.sensorName {
			width: 3.2rem !important;
		}

		.rad+.rad {
			margin-right: 0px !important;
		}

		/* .itembox_6 >>> .el-radio {
    margin-right: 4px !important;
  } */
		/* .itembox_6 >>> .el-radio__label {
    font-size: 8px !important;
    padding-left: 1px !important;
  } */
		/* .itembox_6 >>> .el-radio__inner {
    width: 10px !important;
    height: 10px !important;
  } */
	}

	@media all and (max-width: 1280px) {
		.boxr {
			font-size: 0.35rem !important;
		}

		.boxr span:nth-child(2) {
			font-size: 0.5rem !important;

		}

		#content {
			height: 13.3rem !important;
			/*加上important才起作用，可是加上就无法使用大屏切换功能*/
		}


	}

	* {
		margin: 0;
		box-sizing: border-box;
	}

	.datadial>>>.el-dialog__header {
		position: relative;
		z-index: 99;
		width: 85%;
		height: 0.8rem;
		background-color: transparent !important;
	}

	.datadial>>>.el-dialog__body {
		padding: 0px;
		padding-bottom: 10px;
		padding-top: 10px;
	}

	.dial>>>.el-dialog__header {
		position: relative;
		z-index: 99;
		width: 90%;
		height: 0.8rem;
		background-color: transparent !important;
	}

	.dial>>>.el-dialog__body {
		/*曲线对话框的背景色*/
		padding: 10px;
		line-height: 1rem;
	}

	.dial>>>.el-input__inner {
		/*曲线对话框的背景色*/
		height: 0.6rem;
		line-height: 0.6rem;
	}

	.dial>>>.el-select__caret {
		/*曲线对话框的背景色*/
		height: 0.6rem;
		line-height: 0.6rem;
	}

	/* .router-link-active {
  color: forestgreen;
} */
	/* .green {
  color: green;
} */

	.head {
		width: 99.5%;
		height: 1rem;
		line-height: 1rem;
		background-color: #f3d19e;
		/*border:1px solid red;*/
		margin: 0.2rem auto;
		/* margin-top:0.2rem; */
		color: #b7873c;
		font-size: 0.34rem;
		text-align: left;
		padding: 0 0.4rem;
		margin-left: 0;
	}

	.middle {
		width: 99.5%;
		height: 1.6rem;
		line-height: 1.6rem;
		/* border:1px solid red; */
		display: flex;
		padding: 0;
		justify-content: space-between;
		align-items: center;
		margin: 0.3rem auto;
		margin-left: 0;
	}

	.box {
		display: flex;
		min-width: 5rem;
		height: 1.6rem;
		border: 1px solid #ccc;
	}

	.inpu {
		width: 5rem;
	}

	.boxl {
		float: left;
		min-width: 35%;
		height: 1.58rem;
		line-height: 1.58rem;
		text-align: center;
		background-color: #009688;
		color: white;
	}

	.boxr {
		float: right;
		min-width: 65%;
		padding: 0 0.1rem;
		height: 1.6rem;
		line-height: 1.6rem;
		font-size: 16px;
	}

	.boxr span {
		display: inline-block;
		vertical-align: middle;
		font-size: 0.35rem;
	}

	.boxr span:nth-child(2) {
		font-size: 36px;
		font-weight: 700;
		margin: 0 0.1rem;
	}

	/* .boxr .twoline {
        font-size: 0.3rem !important;
        font-weight: 700;
        margin: 0 0.1rem;
    } */

	.box:first-child .boxl {
		background-color: #009688;
	}

	.box:nth-child(2) .boxl {
		background-color: #1e9fff;
	}

	.box:nth-child(3) .boxl {
		background-color: #ffb800;
	}

	.box:nth-child(4) .boxl {
		background-color: green;
	}

	.box:nth-child(5) .boxl {
		background-color: #ff5722;
	}

	.databox {
		/* -ms-display: grid !important;
		-webkit-display: grid !important;
        display:grid!important; */
		-ms-display: flex !important;
		-webkit-display: flex !important;
		display: flex !important;
		/* -ms-grid-template-columns: repeat(auto-fill, 6.2rem);
		-webkit-grid-template-columns: repeat(auto-fill, 6.2rem);
		grid-template-columns: repeat(auto-fill, 6.2rem); */
		width: 99%;
		height: 7.5rem;
		overflow: auto;
		flex-flow: row;
		flex-wrap: wrap;
		padding: 0 0.1rem 0 0;
		position: relative;
		margin: 0 auto;
		margin-top: 0.1rem;
		justify-content: space-between;
		align-items: center;
	}

	.itembox,
	.itembox_6 {
		min-width: 5.4rem;
		max-width: 8rem;
		height: 1.4rem;
		padding: 0 !important;
		/* max-height:2rem; */
		border: 1px solid #ccc;
		font-size: 0.25rem;
		margin-top: 0.1rem;
		border-radius: 5px;
		margin-right: 4px;
	}

	/* .itembox_6 {
  min-width: 5rem;
  max-width: 10rem;
} */

	.imgbox {
		float: left;
		display: inline-flex;
		align-items: center;
		width: 1.4rem;
		height: 1.4rem;
		border-right: 1px solid #ccc;
	}

	.pic {
		display: block;
		width: 1.2rem;
		height: 1.2rem;
		margin: 0 auto;
	}

	.valuebox,
	.valuebox_6 {
		min-width: 4.6rem;
		/*4.8*/
		max-width: 5.4rem;
		/*5.6*/
		height: 1.2rem;
		line-height: 0.6rem;
		float: right;
		/* border:1px solid red; */
	}

	/* .valuebox_6 {
  min-width: 5rem;
  max-width: 8rem;
} */

	#content,
	.content {
		width: 99.5%;
		overflow: hidden;
		/* transition:all 2s linear; */
		height: 14.5rem;
		/* position:absolute; */
		margin: 0 auto;
		margin-left: 0;
		/* margin-left:0.2rem; */
		padding: 0;
	}

	.content {
		height: 17rem;
	}

	.mapAll {
		color: red;
		position: fixed;
		right: 1rem;
		bottom: 1.333rem;
		/* transform: translate(750px,-80px); */
		font-size: 0.333rem;
		color: white;
		width: 1.8rem;
		height: 0.6rem;
		background-color: green;
		border-radius: 0.1rem;
	}

	.roundline {
		height: 0.6rem;
		width: 100%;
		padding: 0.1rem !important;
		line-height: 0.6rem;
		/* border:1px solid red; */
		box-sizing: border-box;
	}

	.read,
	.write {
		display: inline-block;
		box-sizing: border-box;
		width: 2rem;
		height: 0.5rem;
		line-height: 0.5rem;
		padding: 0;
		padding-left: 0.1rem;
		overflow: hidden;
		text-align: left;
		margin-right: 0.05rem;
		margin-bottom: 0.2rem;
		border-radius: 4px;
		border: 1px solid #ccc;
		color: #111;
	}

	.write {
		border: 1px solid forestgreen;
		color: forestgreen;
		cursor: pointer;
	}

	.btn {
		box-sizing: border-box;
		display: inline-block;
		padding: 0 !important;
		width: 1.4rem;
		height: 0.5rem;
		text-align: center;
		font-size: 0.24rem;
		line-height: 0.5rem;
		border: 1px solid #ccc;
		vertical-align: middle;
		/* margin-top: 0.1rem; */
	}

	#myChart,
	#myChartLive,
	#without {
		min-width: 90%;
		height: 450px;
		margin: 0 auto;
		margin-top: 20px;
		padding: 0 !important;
	}

	/* #without {
  line-height: 600px;
  text-align: center;
  font-size: 0.3rem;
} */

	.mapbtn {
		display: inline-block;
		position: fixed;
		bottom: 0.6rem;
		right: 0.5rem;
		width: 1.4rem;
		height: 0.6rem;
		font-size: 0.3rem;
		line-height: 0.5rem;
		z-index: 10000;
		color: white;
		background-color: forestgreen;
		border-radius: 4px;
	}

	/* #backbtn {
		position: fixed;
		bottom: 0.5rem;
		right: 0.5rem;
		z-index: 10000;
	} */

	.sensorName {
		float: left;
		height: 0.6rem;
		line-height: 0.6rem;
		width: 3rem;
	}

	.mapbtn:hover {
		background-color: limegreen;
	}

	.no,
	.no_grey,
	.yes {
		transform: translate(-0.1rem, 0.05rem);
	}

	.bt_outer {
		transform: translate(0, 0.05rem);
	}

	.alarm_on,
	.alarm_off {
		transform: translate(0, 0.05rem);
	}

	.turn {
		cursor: pointer;
	}

	.sate .rad {
		margin-top: 0.3rem;
	}

	.sate .rad+.rad {
		margin-left: 0;
	}

	.bottom_top {
		position: relative;
		margin: 0.1rem auto !important;
		width: 99%;
		text-align: left;
		height: 1rem;
		line-height: 1rem;
		padding-right: 0.2rem;
		background-color: #ccc;
		/*约等于#111透明0.5*/
		/* box-shadow: 0px 0px 10px 5px inset #0b2c51; */
	}

	.vars,
	.live {
		float: left;
		width: 2.2rem;
		text-align: center;
		height: 1rem;
		cursor: pointer;
		line-height: 1rem;
		font-size: 0.35rem;
		/* background-color: #B7873C; */
	}

	.search {
		width: auto;
		height: 1rem;
		line-height: 1rem;
		border-radius: 6px;
		position: absolute;
		padding-left: 10px;
		background-color: rgba(0, 0, 0, 0.3);
		top: 0.2rem;
		left: 0.2rem;
		z-index: 100;
	}

	.searchForm {
		display: inline-block;
		text-align: left;
		height: 0.8rem;
		line-height: 0.8rem;
		vertical-align: middle;
		margin-top: 4px;
		width: auto;
		float: left;
		background-color: transparent;
		/* border:1px solid green; */
	}

	.searchForm .inpu /deep/ .el-input__inner {
		width: 5rem !important;
		color: #fff !important;
		background-color: transparent !important;
	}

	.searchForm /deep/ .el-input {
		width: 5rem !important;
		color: #fff !important;
		background-color: transparent !important;
	}

	.searchForm /deep/ .el-select {
		width: 5rem !important;
		color: #fff !important;
		background-color: transparent !important;
	}

	.chaxu {
		color: white;
		font-size: 0.3rem;
	}
</style>
<style scoped>
	/*以下为开关样式 */
	@import url("../assets/newSwitch.css");
</style>
